<template>
  <div class="mybody">
    <my-item v-for="item in listValues" :key="item.id" :item="item" />
  </div>
</template>

<script setup>
// MyItemVue回车即可自动生成以下一句
import MyItem from "./MyItem.vue";
import mitts from "../bus";
const listValues = ref([]);
let inputValue;
// 定义自定义事件，在回调中接收值
mitts.on("giveInputValue", (e) => {
  inputValue = e;
});
onMounted(() => {
  // console.log(inputValue,'inputValue')
});
// 触发自定义事件，并传值
mitts.emit("givelistValues", listValues);
mitts.on("addlistValues", () => {
  listValues.value.push({
    value: inputValue.value,
    id: Date.now(),
  });
  mitts.emit("clearinputValue")
});
mitts.on('delList', (id) => {
  listValues.value = listValues.value.filter(item => {
    return item.id !== id
  })
})
</script>

<style lang="scss" scoped>
.mybody {
  width: 100%;
}
</style>
